<template>
  <div>
    <h1>App</h1>
    <p>{{ $store.state.counter.count }}</p>
    <p>{{ $store.state.user.name }}</p>
    <p>{{ count }}</p>
    <p>{{ name }}</p>

    <p>{{ $store.getters["counter/oddOrEven"] }}</p>
    <p>{{ $store.getters["user/formattedName"] }}</p>

    <p>{{ oddOrEven }}</p>
    <p>{{ formattedName }}</p>
    
    <button @click="doAction">触发action</button>
    <button @click="doMutation">触发mutation</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";

export default {
  name: "App",
  computed: {
    // 将vuex中数据映射到计算属性中
    // ...mapState({
    //   count: (state) => state.counter.count,
    //   name: (state) => state.user.name,
    // }),
    ...mapState("counter", ["count"]),
    ...mapState("user", ["name"]),

    ...mapGetters("counter", ["oddOrEven"]),
    ...mapGetters("user", ["formattedName"]),
  },
  mounted() {
    console.log(this.$store.getters);
  },
  methods: {
    ...mapActions("counter", ["increment"]),
    ...mapMutations("counter", ["INCREMENT"]),
    doAction() {
      // this.$store.dispatch("counter/increment", 1);
      this.increment(1);
    },
    doMutation() {
      // this.$store.commit("counter/INCREMENT", 2);
      this.INCREMENT(2);
    },
  },
};
</script>

<style></style>
